body{
padding:0px;
margin:0px; 
}
.flowmap{
    background-image:url(../images/bg_grid.jpg);
    position:relative;
    -webkit-user-select: none;
    overflow: hidden;
  /*  position:absolute;
    left:200px;
    top:100px;
   */
   .ico{
        background-image: url(../images/toolbar_icons.png);
        background-repeat: no-repeat no-repeat;
        margin: 1px 0px;
        background-size: 460px 16px;
        width: 16px;
        height: 16px;
        display:block;
        margin-left: 12px;
        margin-top: 7px;
   }
    .toolbar-add {
      background-position: 0px 0px;
      width: 16px;
      height: 16px;
    }
    .toolbar-new_window {
      background-position: -18px 0px;
      width: 16px;
      height: 16px;
    }
    .toolbar-remove {
      background-position: -37px 0px;
      width: 16px;
      height: 16px;
    }
    .toolbar-save {
      background-position: -55px 0px;
      width: 16px;
      height: 16px;
    }
    .toolbar-default {
      background-position: -74px 0px;
      width: 16px;
      height: 16px;
    }
    .toolbar-download {
      background-position: -92px 0px;
      width: 16px;
      height: 16px;
    }
    .toolbar-edge_VH {
      background-position: -111px 0px;
      width: 16px;
      height: 16px;
    }
    .toolbar-edge {
      background-position: -129px 0px;
      width: 16px;
      height: 16px;
    }
    .toolbar-expand {
      background-position: -148px 0px;
      width: 16px;
      height: 16px;
    }
    .toolbar-json {
      background-position: -166px 0px;
      width: 16px;
      height: 16px;
    }
    .toolbar-line {
      background-position: -185px 0px;
      width: 16px;
      height: 16px;
    }
    .toolbar-max {
      background-position: -203px 0px;
      width: 16px;
      height: 16px;
    }
    .toolbar-new {
      background-position: -222px 0px;
      width: 16px;
      height: 16px;
    }
    .toolbar-overview {
      background-position: -240px 0px;
      width: 16px;
      height: 16px;
    }
    .toolbar-pan {
      background-position: -259px 0px;
      width: 16px;
      height: 16px;
    }
    .toolbar-polygon {
      background-position: -277px 0px;
      width: 16px;
      height: 16px;
    }
    .toolbar-print {
      background-position: -296px 0px;
      width: 16px;
      height: 16px;
    }
    .toolbar-rectangle_selection {
      background-position: -314px 0px;
      width: 16px;
      height: 16px;
    }
    .toolbar-search {
      background-position: -333px 0px;
      width: 16px;
      height: 16px;
    }
    .toolbar-update {
      background-position: -351px 0px;
      width: 16px;
      height: 16px;
    }
    .toolbar-upload {
      background-position: -370px 0px;
      width: 16px;
      height: 16px;
    }
    .toolbar-zoomin {
      background-position: -388px 0px;
      width: 16px;
      height: 16px;
    }
    .toolbar-zoomout {
      background-position: -407px 0px;
      width: 16px;
      height: 16px;
    }
    .toolbar-zoomreset {
      background-position: -425px 0px;
      width: 16px;
      height: 16px;
    }
    .toolbar-maximum {
      background-position: -444px 0px;
      width: 16px;
      height: 16px;
    }

    .toolbar-reset {
        background-image:url(../images/toolbar_icon_reset.png);
        background-size: 100%;
    }

   .toolbar{
        background-color: #fff;
        width: 100%;
        box-sizing: border-box;
        border-bottom: 1px solid #ddd;

        .btns-group{
            margin:0px;
            margin:3px 0px 0px 5px;
            border:1px solid #ddd;
            border-radius:5px;
            overflow:hidden;
            list-style:none;
            padding:0px;
            display: inline-block;
            input.btn{
                width:128px;
                padding: 5px 10px;
                border: none;
                border-right:1px solid #ddd;
                text-align:left;
                box-sizing: border-box;
            }
            input.btn:hover{
                background-color:#fff;
            }
            .btn{
                width:38px;
                height:30px;
                line-height:30px;
                float:left;
                text-align:center;
                border-right:1px solid #ddd;
                cursor: pointer;
            }
            .btn.active{
                -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
                box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
                background-color: #ebebeb;
            }
            .btn:hover{
                background-color: #ebebeb;
            }
            .btn:last-child{
                border-right:0px;
            }
        }
   }
   .rightMenu{
       
        position:absolute;
        top:100px;
        left:100px;
        min-width: 160px;
        padding: 0;
        margin: 2px 0 0;
        font-size: 14px;
        list-style: none;
        background-color: #fff;
        border: 1px solid rgba(0,0,0,0.15);
        border-radius: 4px;
        -webkit-box-shadow: 0 6px 12px rgba(0,0,0,0.175);
        box-shadow: 0 6px 12px rgba(0,0,0,0.175);
        background-clip: padding-box;
        font-family: "Open Sans", "Microsoft YaHei", "Hiragino Sans GB", "Hiragino Sans GB W3", "微软雅黑", "Helvetica Neue", Arial, sans-serif;
        visibility:hidden;
        li{
            height:35px;
            line-height:35px;
            display:block;
            border-bottom:1px solid #ddd;
            padding-left:20px;
            color: #333;
            cursor: pointer;
            position:relative;
        }
        li:hover{
            background-color: #ebebeb;
        }
        
        .rightMenuChild{
            top:-3px;
            left:165px;
            visibility: hidden;
        }
        .active{
            .rightMenuChild{
               visibility: visible;
            }
        }
   }
   .rightMenu.active{
       visibility:visible;
   }
   
   .headMenu{
        position: absolute;
        display: block;
        top: 0px;
        right: 8px;
        height: 52px;
        width: 45px;
        list-style: none;
        padding: 0px;
        margin: 0px;
        margin-top: 4px;
        li{ 
            padding:0px;
            float:left;
            width: 45px;
            height: 52px;
            background-size:100%;
            background-repeat:no-repeat;
        }
        li:hover{
           background-color:#C7BBBB;
        }
   }
   
   .nodeMenu{
        position: absolute;
        display:none;
        top: 100px;
        left: 100px;
        list-style:none;
        background-color:#eee;
        padding:0px;
        box-shadow: 0 0 12px #999999;
        height:25px;
        margin:0px;
        margin-top:5px;
        li{ 
            padding:0px;
            float:left;
            width: 25px;
            height: 25px;
            background-repeat:no-repeat;
            background-size:auto;
            background-position:center;
        }
        li:hover{
           background-color:#C7BBBB;
        }
   }
   .nodeMenu.more{
       li:nth-child(3),li:nth-child(4),li:nth-child(5),li:nth-child(6){
            display:block;
        }
   }
   .nodeMenu.active{
       display:inline-block;
   }
   
   .addModelMask{
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: rgba(156, 146, 146, 0.64);
        top: 0px;
        left: 0px;
        display:none;
   }
   .addModelMask.active{
        display:block;
   }
   
   .addModel{
        top:0px;
        left:0px;
        right:0px;
        bottom:0px;
        position: absolute;
        width: 300px;
        height:120px;
        padding:10px;
        border: 1px solid #666;
        margin: auto;
        z-index: 100;
        display:none;
        box-shadow: 0px 0px 10px #30383A;
        background-color:#eee;
        border-radius: 3px;
        -webkit-user-select: none;
        input{
            width:100%;
            border-radius: 5px;
            border:1px solid #666;
        }
        label{
            width:100%;
            text-align:center;
            padding-right:5px;
        }
        button{
               width: 80px;
                position: absolute;
                border-radius: 5px;
                border: 1px solid #666;
        }
        button.submit{
           right:10px;
           background-color:#337ab5;
           color:white;
        }
   }
   .addModel.active{
       width:200px;
       display:block;
   }
   .addBXModel,.addCSModel{
       height:430px;
       input{
            width:100%;
       }
       .list-group{
           max-height:300px;
           overflow:auto;
           input{
               width:50px;
           }
       }
   }
   .addBXModel.active,.addCSModel.active{
       width:400px;
   }
   .comfirmCSModel{
       height: 160px;
       width: 300px!important;
       .radioContainor{
           text-align:center;
       }
       input[type=radio]{
           width: 20px;
       }
   }

   .item-tip{
           position: absolute;
            background-color: rgb(255, 255, 243);
            border: 1px solid #171717;
            color: #666;
            font-size: 12px;
            padding-left: 2px;
            padding-right: 2px;
            padding-top: 1px;
            padding-bottom: 1px;
   }

   .paper{
       display:none;
       &.active{
           display:block;
       }
   }
   textarea.json{
       display:none;
       width:100%;
       height:100%;
       padding:10px;
       box-sizing:border-box;
       background-color:#ddd;
       &.active{
           display:block;
       }
       &.error{
           color:red;
       }
   }
}